<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货地址 - 花礼相伴</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f8f8;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 主体内容 -->
    <div class="min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
            <div class="container mx-auto flex items-center justify-between">
                <a href="home.html" class="text-2xl font-bold text-rose-500 flex items-center">
                    <i class="fas fa-flower text-rose-500 mr-2"></i>
                    花礼相伴
                </a>
                <div class="hidden lg:block w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索鲜花、场景..." 
                            class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                <nav class="hidden md:flex space-x-6">
                    <a href="home.html" class="text-gray-600 hover:text-rose-500">首页</a>
                    <a href="categories.html" class="text-gray-600 hover:text-rose-500">分类</a>
                    <a href="cart.html" class="text-gray-600 hover:text-rose-500">购物车</a>
                </nav>
                <div class="flex items-center space-x-4">
                    <a href="cart.html" class="p-2 relative">
                        <i class="fas fa-shopping-cart text-gray-600 text-xl"></i>
                        <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
                    </a>
                    <div class="hidden md:flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-8 h-8 rounded-full">
                        <span class="text-gray-700">李小花</span>
                    </div>
                </div>
            </div>
            <!-- 移动端搜索栏 -->
            <div class="mt-3 relative md:hidden">
                <input type="text" placeholder="搜索鲜花、场景..." 
                    class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </header>

        <!-- 主体内容区域 -->
        <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
            <div class="md:flex md:gap-6">
                <!-- 左侧导航 -->
                <div class="md:w-1/4 lg:w-1/5 mb-6 md:mb-0">
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <!-- 用户信息 -->
                        <div class="p-4 text-center border-b border-gray-100">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-20 h-20 rounded-full mx-auto mb-3">
                            <h2 class="font-bold text-lg">李小花</h2>
                            <p class="text-gray-500 text-sm">普通会员</p>
                        </div>

                        <!-- 导航菜单 -->
                        <nav class="p-2">
                            <a href="user-center.html" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                                <i class="fas fa-user-circle w-5 text-center mr-2"></i>
                                <span>个人信息</span>
                            </a>
                            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                                <i class="fas fa-clipboard-list w-5 text-center mr-2"></i>
                                <span>我的订单</span>
                            </a>
                            <a href="address.html" class="flex items-center p-3 rounded-lg bg-rose-50 text-rose-500">
                                <i class="fas fa-map-marker-alt w-5 text-center mr-2"></i>
                                <span>收货地址</span>
                            </a>
                            <a href="favorites.html" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                                <i class="fas fa-heart w-5 text-center mr-2"></i>
                                <span>我的收藏</span>
                            </a>
                            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                                <i class="fas fa-comment-alt w-5 text-center mr-2"></i>
                                <span>我的评价</span>
                            </a>
                            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                                <i class="fas fa-cog w-5 text-center mr-2"></i>
                                <span>账号设置</span>
                            </a>
                        </nav>
                    </div>
                </div>

                <!-- 右侧内容 -->
                <div class="md:w-3/4 lg:w-4/5">
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-center mb-6 pb-2 border-b border-gray-100">
                            <h2 class="text-lg font-bold">收货地址管理</h2>
                            <button class="flex items-center text-rose-500 hover:text-rose-600">
                                <i class="fas fa-plus mr-1"></i> 新增收货地址
                            </button>
                        </div>
                        
                        <!-- 地址列表 -->
                        <div class="space-y-4">
                            <!-- 默认地址 -->
                            <div class="border-2 border-rose-500 rounded-lg p-4 relative">
                                <span class="absolute top-0 right-0 bg-rose-500 text-white text-xs px-2 py-1 rounded-bl-lg">默认</span>
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <span class="font-medium">张三</span>
                                        <span class="ml-4">13812345678</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 mb-4">北京市朝阳区建国路88号中央公园12号楼2单元501室</p>
                                <div class="flex justify-between items-center">
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-500" checked>
                                        <span class="ml-2 text-gray-700">设为默认</span>
                                    </label>
                                    <div class="flex space-x-3 text-sm">
                                        <button class="text-gray-500 hover:text-rose-500"><i class="fas fa-edit mr-1"></i> 编辑</button>
                                        <button class="text-gray-500 hover:text-rose-500"><i class="fas fa-trash mr-1"></i> 删除</button>
                                    </div>
                                </div>
                            </div>

                            <!-- 其他地址 -->
                            <div class="border border-gray-200 hover:border-gray-300 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <span class="font-medium">李四</span>
                                        <span class="ml-4">13987654321</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 mb-4">上海市浦东新区陆家嘴环路1000号金融中心25楼</p>
                                <div class="flex justify-between items-center">
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-500">
                                        <span class="ml-2 text-gray-700">设为默认</span>
                                    </label>
                                    <div class="flex space-x-3 text-sm">
                                        <button class="text-gray-500 hover:text-rose-500"><i class="fas fa-edit mr-1"></i> 编辑</button>
                                        <button class="text-gray-500 hover:text-rose-500"><i class="fas fa-trash mr-1"></i> 删除</button>
                                    </div>
                                </div>
                            </div>

                            <div class="border border-gray-200 hover:border-gray-300 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <span class="font-medium">王五</span>
                                        <span class="ml-4">13765432198</span>
                                    </div>
                                </div>
                                <p class="text-gray-600 mb-4">广州市天河区珠江新城冼村路28号</p>
                                <div class="flex justify-between items-center">
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-500">
                                        <span class="ml-2 text-gray-700">设为默认</span>
                                    </label>
                                    <div class="flex space-x-3 text-sm">
                                        <button class="text-gray-500 hover:text-rose-500"><i class="fas fa-edit mr-1"></i> 编辑</button>
                                        <button class="text-gray-500 hover:text-rose-500"><i class="fas fa-trash mr-1"></i> 删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 新增地址表单 -->
                        <div class="mt-8 pt-6 border-t border-gray-200">
                            <h3 class="text-lg font-bold mb-4">新增收货地址</h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-gray-700 mb-1">收货人</label>
                                    <input type="text" placeholder="请输入收货人姓名" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-gray-700 mb-1">手机号码</label>
                                    <input type="text" placeholder="请输入手机号码" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                                </div>
                            </div>

                            <div class="mt-4">
                                <label class="block text-gray-700 mb-1">所在地区</label>
                                <div class="grid grid-cols-3 gap-2">
                                    <select class="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                                        <option>请选择省份</option>
                                        <option>北京市</option>
                                        <option>上海市</option>
                                        <option>广东省</option>
                                        <option>江苏省</option>
                                    </select>
                                    <select class="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                                        <option>请选择城市</option>
                                        <option>北京市</option>
                                    </select>
                                    <select class="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                                        <option>请选择区县</option>
                                        <option>朝阳区</option>
                                        <option>海淀区</option>
                                        <option>东城区</option>
                                        <option>西城区</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mt-4">
                                <label class="block text-gray-700 mb-1">详细地址</label>
                                <input type="text" placeholder="请输入详细地址，如街道、门牌号等" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                            </div>

                            <div class="mt-4">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-500">
                                    <span class="ml-2 text-gray-700">设为默认收货地址</span>
                                </label>
                            </div>

                            <div class="mt-6 flex justify-center md:justify-start">
                                <button class="px-6 py-2 bg-rose-500 text-white rounded-md hover:bg-rose-600 transition duration-300">
                                    保存地址
                                </button>
                                <button class="ml-4 px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition duration-300">
                                    取消
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
                            <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
                            <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
                            <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
                            <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
                            <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
                            <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
                            <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
                            <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
                            <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center"><i class="fas fa-phone mr-2 text-rose-500"></i> 400-800-8888</li>
                            <li class="flex items-center"><i class="fas fa-envelope mr-2 text-rose-500"></i> service@flowercompany.com</li>
                            <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-rose-500"></i> 北京市朝阳区建国路88号</li>
                        </ul>
                        <div class="flex space-x-4 mt-4">
                            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
                    <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>